import React, { useEffect, useState } from 'react'
import { Card, Table, TreeSelect } from 'antd'
import { getDeptList, getFindScheduleList, getScheduleRule } from '@/api/hosp'
import { useParams } from 'react-router-dom'
import { upPageInfo, useSelectPageCommon } from '@/store/slice/pageCommon'

const { TreeNode } = TreeSelect

function Department() {
    const { hoscode } = useParams()
    const { pageInfo } = useSelectPageCommon()
    // 用于存储科室列表
    const [departmentList, setDepartmentList] = useState([])
    // 存储排班列表
    const [bookingScheduleList, setBookingScheduleList] = useState<any[]>([])
    // 科室编号
    const [depCode, setDepCode] = useState('')
    // 存储key
    const [keys, setKeys] = useState('-1')

    // 异步获取排班列表
    const getScheduleRuleAsync = function (current: number, pageSize: number, depcode: string) {
        getScheduleRule(current, pageSize, hoscode as string, depcode).then((value) => {
            console.log(value)
            setBookingScheduleList(
                value.data.bookingScheduleList.map((v: any) => {
                    v.scheduleList = []
                    return v
                })
            )
            upPageInfo({
                current,
                pageSize,
                total: value.data.total
            })
        })
    }

    useEffect(() => {
        getDeptList(hoscode as string).then((value) => {
            console.log(value)
            setDepartmentList(value.data)
        })
    }, [])
    return (
        <div>
            <TreeSelect
                showSearch // 允许搜索
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="请选择医院科室"
                allowClear // 是否允许清除
                // 根据输入的值进行过滤
                filterTreeNode={(inputValue: string, treeNode: any) => {
                    return treeNode.title.includes(inputValue)
                }}
                onChange={(code) => {
                    setDepCode(code)
                    getScheduleRuleAsync(1, 5, code)
                }}
            >
                {departmentList.map((item: any) => (
                    <TreeNode selectable={false} key={item.depcode} value={item.depcode} title={item.depname}>
                        {item.children.map((item: any) => (
                            <TreeNode key={item.depcode} value={item.depcode} title={item.depname} />
                        ))}
                    </TreeNode>
                ))}
            </TreeSelect>
            <Table
                rowKey={'workDate'}
                pagination={{
                    ...pageInfo,
                    onChange(current, pageSize) {
                        // 获取排班规则
                        getScheduleRuleAsync(current, pageSize, depCode)
                    }
                }}
                bordered={true}
                // 扩展行
                expandable={{
                    // 是否展开
                    onExpand(expanded, record: any) {
                        // console.log(expanded,record);
                        if (expanded) {
                            setKeys(record.workDate)
                            getFindScheduleList(hoscode as string, depCode, record.workDate).then((value) => {
                                console.log(value)
                                setBookingScheduleList(
                                    bookingScheduleList.map((item: any) => {
                                        if (item.workDate === record.workDate) {
                                            item.scheduleList = value.data
                                        }
                                        return item
                                    })
                                )
                            })
                        } else {
                            // 关闭
                            setKeys('-1')
                        }
                    },
                    // 是否展开
                    expandedRowKeys: [keys],
                    // 展开的内容
                    expandedRowRender(record) {
                        return (
                            <Card>
                                <Table
                                    rowKey={'id'}
                                    pagination={false}
                                    bordered={true}
                                    columns={[
                                        {
                                            title: '序号',
                                            align: 'center',
                                            render(value, rows, index) {
                                                return index + 1
                                            }
                                        },
                                        {
                                            title: '号源时间',
                                            align: 'center',
                                            dataIndex: 'workDate'
                                        },
                                        {
                                            title: '预约总数',
                                            align: 'center',
                                            dataIndex: 'reservedNumber'
                                        },
                                        {
                                            title: '剩余预约数',
                                            align: 'center',
                                            dataIndex: 'availableNumber'
                                        },
                                        {
                                            title: '挂号费',
                                            align: 'center',
                                            dataIndex: 'amount'
                                        },
                                        {
                                            title: '技能擅长',
                                            align: 'center',
                                            dataIndex: 'skill'
                                        }
                                    ]}
                                    dataSource={record.scheduleList}
                                />
                            </Card>
                        )
                    }
                }}
                columns={[
                    {
                        title: '序号',
                        align: 'center',
                        render(value, rows, index) {
                            return (pageInfo.current - 1) * pageInfo.pageSize + index + 1
                        }
                    },
                    {
                        title: '医师数量',
                        align: 'center',
                        dataIndex: 'docCount'
                    },
                    {
                        title: '号源时间',
                        align: 'center',
                        dataIndex: 'workDate'
                    },
                    {
                        title: '预约总数',
                        align: 'center',
                        dataIndex: 'reservedNumber'
                    },
                    {
                        title: '剩余预约数',
                        align: 'center',
                        dataIndex: 'availableNumber'
                    }
                ]}
                dataSource={bookingScheduleList}
            ></Table>
        </div>
    )
}

export default Department
